<template>
<div>
   <div class="rightWin1" v-if="visible">
      <span class="title">{{label}}</span>
      <el-form :inline="true" class="demo-form-inline">
         <el-form-item label="候选组">
             <el-input v-model="candidateGroups" placeholder="输入候选组"></el-input>
         </el-form-item>
         <el-form-item label="指派人">
             <el-input v-model="assignee" placeholder="输入指派人"></el-input>
         </el-form-item>
      </el-form>
      <footer class="footer">
          <el-button type="primary" @click="submit">保存</el-button>
      </footer>
   </div>
 </div>
</template>

<script>

  export default {
    name: 'UserTask',
    data() {
      return {
        visible: false,
        bool: true,
        node: {},
        label: '',
        candidateGroups: '',
        assignee: ''
      }
    },
    mounted() {

    },
    methods: {
      init(item) {
        this.node = item
        this.label = item.item.data.label
        this.candidateGroups = item.item.data.candidateGroups
        this.assignee = item.item.data.assignee
      },
      submit() {
        var node = this.$parent.getNodeById(this.node.item.id)
        node.setData(Object.assign({}, this.node.item.data, {candidateGroups: this.candidateGroups,assignee: this.assignee}))
        this.visible = false
      }
    }
  }
</script>
<style scoped>
    section {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .rightWin1 {
        overflow-y: scroll;
    }

    .rightWin1 {
        background-color: white;
        position: absolute;
        top: 50px;
        right: 0;
        bottom: 0;
        padding: 0 12px;
        width: 300px;
    }
    .title {
      font-size: 20px;
      margin-top: 10px;
      margin-left: 10px;
    }
    .footer {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .demo-form-inline {
      margin-top: 25px;
      margin-left: 10px;
    }
</style>
